<template>
	<div>
		<div id="DirectoryTree-box" v-if="!usertype" v-show="isShowTree">
			<div class="content">
				<h5>图层目录树</h5>
				<!-- 目录树 -->
				<el-tree
					:data="dataTree"
					show-checkbox
					node-key="id"
					:default-expanded-keys="[100, 101]"
					:default-checked-keys="defaultKeys"
					@check-change="handleCheckChange"
					:props="defaultProps"
				></el-tree>
			</div>
		</div>
		<button v-show="!usertype" class="control-btn" @click="handleClick">
			<i
				:class="isShowTree ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
			></i>
		</button>
	</div>
</template>
<script>
var docCatalog;
import { mapState } from 'vuex';
export default {
	name: 'DirectoryTree',
	data() {
		return {
			isShowTree: true,
			defaultKeys: [],
			dataTree: [
				{
					id: 100,
					label: '地图文档',
					disabled: true,
					children: [
						{
							id: 101,
							label: '光谷智慧交通',
							disabled: true,
							children: [],
						},
					],
				},
			],
			defaultProps: {
				children: 'children',
				label: 'label',
			},
		};
	},
	computed: {
		...mapState(['map', 'docLayer', 'usertype']),
	},
	created() {
		// console.log('创建完成');
		this.getTreeData();
		// this.$refs.tree.setCheckedKeys(this.setDefaultKeys);
		// this.$nextTick(() => {
		// 	this.$refs.tree.setCheckedKeys(this.setDefaultKeys);
		// });
		this.setDefaultKeys();
	},
	mounted() {},
	methods: {
		// 获取目录树数据并设置
		getTreeData() {
			// 获取地图信息
			docCatalog = new Zondy.Catalog.MapDoc({
				ip: 'localhost',
				port: 6163,
				docName: 'guanggu', //地图文档名称
			});

			// 获取指定地图下所有图层的要素信息
			docCatalog.getLayersInfo((data) => {
				// 设置目录树数据
				// console.log(data);
				data.value.forEach((item) => {
					this.dataTree[0].children[0].children.push({
						id: item.LayerIndex,
						label: item.Name,
					});
					this.defaultKeys.push(item.LayerIndex);
				});
			});
		},
		setDefaultKeys() {
			setTimeout(() => {
				let stempKeys = this.defaultKeys.slice(0);
				this.defaultKeys = stempKeys;
			}, 1000);
		},
		// 控制图层显隐
		handleCheckChange(data, checked) {
			if (checked) {
				//获取原型上的doclayer，选择状态不能用show和hide，要用include和exclude
				this.docLayer.setLayerStatus(data.id, 'include');
			} else {
				//没有选中状态
				this.docLayer.setLayerStatus(data.id, 'exclude');
			}
		},
		handleClick() {
			this.isShowTree = !this.isShowTree;
		},
	},
};
</script>
<style scoped>
#DirectoryTree-box {
	position: absolute;
	top: 230px;
	left: 10px;
	z-index: 200;
	width: 200px;
	height: 300px;
	background: white;
}
.control-btn {
	position: absolute;
	top: 507px;
	left: 10px;
	z-index: 200;
	width: 26px;
	height: 23px;
	z-index: 200;
	color: #fff;
	font-size: 1.14em;
	font-weight: 700;
	line-height: 0.4em;
	background: rgba(0, 60, 136, 0.5);
	border: none;
	border-radius: 2px;
}
.content h5 {
	padding: 5px 10px;
	color: white;
	text-align: center;
	background: #409eff;
}
</style>
